import React, { Component } from 'react'

export default function withFar(WrappedComponent) {
  return class Far extends Component {
    // react调试工具中,展示组件名,优先显示静态属性displayName,没有则显示静态属性name
    static displayName = 'with' + WrappedComponent.name
    state = {
      x: 0,
      y: 0,
    }

    handleMove = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      })
    }

    componentDidMount() {
      window.addEventListener('mousemove', this.handleMove)
    }

    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMove)
    }
    render() {
      return (
        <WrappedComponent
          //   x={this.state.x}
          //   y={this.state.y}
          //   如果有一个对象,里面的数据需要一个一个传入组件,则可以使用下面的这种写法
          {...this.state}
          {...this.props}
        ></WrappedComponent>
      )
    }
  }
}
